<template>
	<view>
		<nv :config="config"></nv>
		<view class="" style="top: 0;width: 100%;">
			<search @searchChange="searchChange" class="" ref="search"></search>
		</view>
		<view class="">
			<mescroll-body ref="mescrollRef" top="20" onScroll:true :up="upOption" @init="mescrollInit"
				@down="downCallback" @up="upCallback">
				<view class="cu-chat" style="margin: 30rpx;overflow: hidden;">
					<view class="panel-box " v-for="(item,index) in dialogList" :key="index">
						<!-- 	<template v-if="index == 0">
						121313
						<ad unit-id="adunit-f547ee1478458169"></ad>
					</template> -->
						<!-- <view class="" v-if="advertisingOpen">
						<template v-if="index == 0 || index % numAdvertising === 0 && advertisingOpen">
							<ad v-if="adUnitIdbanner" :unit-id="adUnitIdbanner"></ad>
						</template>
					</view> -->
						<template>
							<view class="" v-for="(item1,index1) in item.list">
								<view class="cu-item" @tap="guzhi(item1,item)" v-if="item1.sex == 0" :key="index1">
									<view class="cu-avatar radius"
										style="position: relative;-left: 30rpx; width: 40rpx;height: 40rpx;background-image:url(https://oss.mhwk.pro/7742620f-80b9-4d38-9509-18f81a31b8bf.jpg);">
									</view>
									<view class="main content-box" style="margin: 0 20rpx; max-width: 74%;color: #ccc;"
										v-html="item1.title">
									</view>
								</view>
								<view class="cu-item self" v-if="item1.sex == 1" :key="index1"
									style="padding:0 0 10rpx 0;">
									<view class="main" style="max-width: 74%;">
										<view @tap="guzhi(item1,item)" class="" style="margin-right: 20rpx;">
											<image style="width: 50rpx;height: 50rpx;"
												src="https://oss.mhwk.pro/bc308e42-7018-4929-9e53-39bbbca5e03e.jpg"
												mode=""></image>
										</view>
										<view @tap="guzhi(item1,item)" class="content bg-green shadow content-box"
											style="" v-html="item1.title">
										</view>
									</view>
									<view @tap="guzhi(item1,item)" class="cu-avatar radius"
										:style="'background-image:url(https://oss.mhwk.pro/f2deb48f8c5494eef76000756cc5f2f498257ed1.jpeg);'">
									</view>
								</view>
								<view class="cu-item" v-if="item1.sex == 2" :key="index1">
									<view class="cu-avatar radius"
										:style="'background-image:url(https://oss.mhwk.pro/3c6d55fbb2fb43164f8cf1dd6594542908f7d344.jpeg);'">
									</view>
									<view class="main" style="max-width: 74%;">
										<view @tap="guzhi(item1,item)"
											class="content content-box shadow shadow bg-white text-black"
											style="background: #efefef;" v-html="item1.title">
										</view>
										<view class="" @tap="guzhi(item1,item)" style="margin-left: 20rpx;">
											<image style="width: 50rpx;height: 50rpx;"
												src="https://oss.mhwk.pro/bc308e42-7018-4929-9e53-39bbbca5e03e.jpg"
												mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import {
		getWordDetails
	} from "@/api/lianai.js";
	import search from "@/components/common/search.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			search,
		},
		data() {
			return {
				config: {
					title: "话术大全",
					color: "#ffffff"
				},
				proId: '',
				dialogList: [],
				upOption: {
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: '去看看'
					}
				}
			};
		},
		mounted() {

		},
		onLoad(option) {
			this.proId = option.proId;
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				var page = {
					num: 1,
					size: 10
				}
				this.upCallback(page);
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				var page = {
					num: 1,
					size: 10
				}
				this.upCallback(page);
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				uni.showLoading({
					title: '加载中'
				});
				getWordDetails({
					"pageNum": page.num,
					"pageSize": page.size,
					"classif": this.proId
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res)
						this.mescroll.endSuccess(res.data.total);
						//设置列表数据
						console.log(page.num)
						if (page.num === 1) this.dialogList = []; //如果是第一页需手动制空列表
						this.dialogList = this.dialogList.concat(res.data.records); //追加新数据
					}
				})
			},
			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			guzhi(item, item1) {
				var _this = this
				uni.setClipboardData({
					data: item.title,
					async success() {
						var data = {
							type: "复制",
							id: item.title,
							content: item,
							date: new Date()
						}
						let res = await uniCloud.callFunction({
							name: "user_record",
							data: data,
						})
						_this.$refs['modal'].modalName = 'Modal'
					}
				});
			},
			// 分享小程序
			onShareAppMessage() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/diction/detail?proId=' + this.proId
				};
			},
			//分享到朋友圈
			onShareTimeline() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/diction/detail?proId=' + this.proId
				}
			},
		},
	}
</script>

<style>
	page {
		background: #fddade;
	}

	.chat-cont .share-cont button {
		background: transparent !important;

	}

	.chat-cont .share-cont button::after {
		border: none !important;
	}
</style>
<style lang="scss" scoped>
	.example {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 20rpx;
		color: #3e3e3e;
		z-index: 99;
		width: 120rpx;
		height: 70rpx;
		background: #ccc;
		position: absolute;
		right: 0;
		top: 0;
	}

	.content-box {
		display: -webkit-box !important;
		word-break: break-all !important;
		text-overflow: ellipsis !important;
		word-wrap: break-word !important;
		white-space: pre-wrap !important;
	}

	.cu-avatar {
		background-color: transparent;
	}

	.panel-box {
		margin-bottom: 50rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
</style>
